<template>
  <div class="config-sidebar">
    <div class="side-scroll" style="height: calc(100vh - 52px)">
      <scrollBar :topFlag="topFlag">
        <el-menu
          v-if="isHaveMenu('simple_config')"
          class="el-menu-vertical-demo sidebar-menu"
          :default-openeds="openArray"
        >
          <div v-if="isHaveMenu('simple_company_identity')" class="el-menu__first">
            <router-link to="/index/newConfig/accountConfig">
              <el-menu-item index="1">
                <span slot="title">{{ $t('configTabTitle.accountInfo') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_operate_log')" class="el-menu__first">
            <router-link to="/index/newConfig/operateLogManage">
              <el-menu-item index="2">
                <span slot="title">{{ $t('configTabTitle.agentLogs') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_account_config')" class="el-menu__first">
            <router-link to="/index/newConfig/safetyConfig">
              <el-menu-item index="3">
                <span slot="title">{{ $t('configTabTitle.loginSafeConfig') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_dept_config')" class="el-menu__first">
            <router-link to="/index/newConfig/deptAndAgentConfig">
              <el-menu-item index="9">
                <span slot="title">{{ $t('configTabTitle.agentManage') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <el-submenu
            v-if="isHaveMenu('simple_business_template_config') || isHaveMenu('simple_business_other_config')"
            index="10"
          >
            <template slot="title">
              <span slot="title">{{ $t('configTabTitle.bussinessConfig') }}</span>
            </template>
            <router-link to="/index/newConfig/businessConfig" v-if="isHaveMenu('simple_business_template_config')"
              ><el-menu-item index="10-1">{{ $t('configTabTitle.bussinessTemplateConfig') }}</el-menu-item></router-link
            >
            <router-link
              to="/index/newConfig/businessSatisfactionConfig"
              v-if="isHaveMenu('simple_business_template_config')"
              ><el-menu-item index="10-2">{{
                $t('configTabTitle.businessSatisfactionConfig')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/bussinessGlobalConfig" v-if="isHaveMenu('simple_business_other_config')"
              ><el-menu-item index="10-3">{{ $t('configTabTitle.bussinessGlobalConfig') }}</el-menu-item></router-link
            >
          </el-submenu>
          <el-submenu v-if="isHaveMenu('simple_channel_skill_group')" index="4">
            <template slot="title">
              <span slot="title">{{ $t('configTabTitle.skillGroupManage') }}</span>
            </template>
            <router-link to="/index/newConfig/callQueueConfig"
              ><el-menu-item v-if="isHaveMenu('simple_channel_call')" index="4-1">{{
                $t('configTabTitle.callQueueConfig')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/webchatQueueConfig"
              ><el-menu-item v-if="isHaveMenu('simple_channel_webchat')" index="4-2">{{
                $t('configTabTitle.webchatQueueConfig')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/emailQueueConfig"
              ><el-menu-item v-if="isHaveMenu('simple_channel_email')" index="4-3">{{
                $t('configTabTitle.emailQueueConfig')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/businessQueueConfig"
              ><el-menu-item v-if="isHaveMenu('simple_channel_business')" index="4-4">{{
                $t('configLazyLoad.agentConfig.businessGroup')
              }}</el-menu-item></router-link
            >
          </el-submenu>
          <el-submenu v-if="isHaveMenu('simple_online_joinin')" index="5">
            <template slot="title">
              <span slot="title">{{ $t('configTabTitle.webchatAccess') }}</span>
            </template>
            <router-link to="/index/newConfig/wxkfAccess"
              ><el-menu-item index="5-1">{{ $t('configTabTitle.wxkfAccess') }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/weixinAccess"
              ><el-menu-item v-if="isHaveMenu('simple_wechat_insert')" index="5-2">{{
                $t('configTabTitle.weixinAccess')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/weixinAppAccess"
              ><el-menu-item v-if="isHaveMenu('simple_wxmini_insert')" index="5-3">{{
                $t('configTabTitle.weixinAppAccess')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/webCustomerService"
              ><el-menu-item v-if="isHaveMenu('simple_website_insert')" index="5-4">{{
                $t('configTabTitle.webCustomerService')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/appAccess"
              ><el-menu-item v-if="isHaveMenu('simple_app_insert')" index="5-5">{{
                $t('configTabTitle.appAccess')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/weiboAccess"
              ><el-menu-item v-if="isHaveMenu('simple_weibo_insert')" index="5-6">{{
                $t('configTabTitle.weiboAccess')
              }}</el-menu-item></router-link
            >
          </el-submenu>
          <el-submenu v-if="isHaveMenu('simple_website_global_config')" index="6">
            <template slot="title">
              <span slot="title">{{ $t('configTabTitle.webchatServieConfig') }}</span>
            </template>
            <router-link to="/index/newConfig/satisfied"
              ><el-menu-item v-if="isHaveMenu('simple_website_satisfaction_config')" index="6-1">{{
                $t('configTabTitle.satisfied')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/webchatEndSession"
              ><el-menu-item v-if="isHaveMenu('simple_finish_webchat_config')" index="6-2">{{
                $t('configTabTitle.webchatEndSession')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/quickReplyMain"
              ><el-menu-item v-if="isHaveMenu('simple_public_quick_reply_config')" index="6-3">{{
                $t('configTabTitle.quickReplyMain')
              }}</el-menu-item></router-link
            >
            <router-link to="/index/newConfig/transferConfig"
              ><el-menu-item index="6-4">
                {{$t('configTabTitle.sessionTransferSettings')}}
              </el-menu-item></router-link
            >
          </el-submenu>
          <div v-if="isHaveMenu('simple_webchat_blacklist_config')" class="el-menu__first">
            <router-link to="/index/newConfig/blackList">
              <el-menu-item index="7">
                <span slot="title">{{ $t('configTabTitle.webchatBlackList') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <el-submenu v-if="isHaveMenu('simple_call_center')" index="8">
            <template slot="title">
              <span slot="title">{{ $t('configTabTitle.callCenterConfig') }}</span>
            </template>
            <router-link :to="item.to" v-for="(item, index) in callCenterMenu" :key="item.id + index">
              <el-menu-item :index="'7-' + index" v-if="isHaveMenu(item.id)">{{ $t(item.displayName) }}</el-menu-item>
            </router-link>
            <!-- <router-link to="/index/newConfig/pbxManage"><el-menu-item index="7-4">PBX基本信息</el-menu-item></router-link>
            <router-link to="/index/newConfig/sipManage"><el-menu-item index="7-5">sip号管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/processConfig"><el-menu-item index="7-16">流程管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/callScheduleManage"><el-menu-item index="7-12">日程管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/callServiceNo"><el-menu-item index="7-14">服务号管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/phoneConfig"><el-menu-item index="7-6">电话条状态设置</el-menu-item></router-link>
            <router-link to="/index/newConfig/outboundCallLine"><el-menu-item index="7-7">外呼线路配置</el-menu-item></router-link>
            <router-link to="/index/newConfig/variableManage"><el-menu-item index="7-8">变量管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/externalNum"><el-menu-item index="7-9">外显号组管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/nodeManage"><el-menu-item index="7-10">节点管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/agentCallManage"><el-menu-item index="7-16">座席管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/labelManage"><el-menu-item index="7-11">标签管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/scheduleManage"><el-menu-item index="7-12">日程管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/ivrManage"><el-menu-item index="7-13">IVR流程管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/serviceNumManage"><el-menu-item index="7-14">服务号管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/voiceLibraryManage"><el-menu-item index="7-15">语音库管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/blackRedList"><el-menu-item v-if="isHaveMenu('simple_black_red_list')" index="7-1">黑红名单管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/labelManage"><el-menu-item index="7-2">标签管理</el-menu-item></router-link>
            <router-link to="/index/newConfig/queueSurveySelect"><el-menu-item v-if="isHaveMenu('simple_call_satisfaction_config')" index="7-3">满意度设置</el-menu-item></router-link>
            <router-link to="/index/newConfig/satisfactionSurvey"><el-menu-item v-if="isHaveMenu('simple_call_satisfaction_config')" index="7-3">满意度设置</el-menu-item></router-link> -->
          </el-submenu>
          <div v-if="isHaveMenu('simple_system_notice')" class="el-menu__first">
            <router-link to="/index/newConfig/noticeConfig">
              <el-menu-item index="10">
                <span slot="title">{{ $t('configTabTitle.noticeManage') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('func_km_tag')" class="el-menu__first">
            <router-link to="/index/newConfig/KnowledgeBaseLabel">
              <el-menu-item index="10">
                <span slot="title">{{ $t('configTabTitle.KnowledgeBaseLabel') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_dynamic_form')" class="el-menu__first">
            <router-link to="/index/newConfig/dynamicForm">
              <el-menu-item index="10">
                <span slot="title">{{ $t('configTabTitle.dynamicForm') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_global_field')" class="el-menu__first">
            <router-link to="/index/newConfig/globalField">
              <el-menu-item index="10">
                <span slot="title">{{ $t('configTabTitle.globalField') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_notification_mail_config')" class="el-menu__first">
            <router-link to="/index/newConfig/emailNotify">
              <el-menu-item index="12">
                <span slot="title">{{ $t('configTabTitle.emailNotify') }}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_service_time')" class="el-menu__first">
            <router-link to="/index/newConfig/serviceTime">
              <el-menu-item index="10">
                <span slot="title">{{$t('configTabTitle.serviceTime')}}</span>
              </el-menu-item>
            </router-link>
          </div>
          <div v-if="isHaveMenu('simple_config_guide') && !$store.state.oemObj.oemFlag" class="el-menu__first">
            <router-link to="/index/newConfig/moreHelp">
              <el-menu-item index="11">
                <span slot="title" style="font-weight: normal">{{ $t('configTabTitle.moreHelp') }}</span>
              </el-menu-item>
            </router-link>
          </div>
        </el-menu>
      </scrollBar>
    </div>
    <div class="config-sidebar__bottom">
      <div style="margin-top: 20px; margin-left: 52px">
        <router-link to="/index/config" class="config-sidebar__bottom-a">
          <span @click="backOld">{{ $t('configTabTitle.backOldSystem') }}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { isHasMenu } from '@/utils/m7Utils'
import scrollBar from '@/components/ui-modules/ScrollBar'
import { addZhuGeTrack } from '@/utils/addZhuGeTrack.js'
export default {
  name: 'Sidebar',
  data() {
    return {
      openArray: ['4', '5', '6', '8', '10'],
      topFlag: true,
      isCollapse: true,
      callCenterMenu: [
        {
          displayName: 'configTabTitle.pbxBasicInformation',
          to: '/index/newConfig/pbxManage',
          id: 'simple_pbx_basic_information'
        },
        {
          displayName: 'configTabTitle.simpleSipManagement',
          to: '/index/newConfig/sipManage',
          id: 'simple_sip_management'
        },
        {
          displayName: 'configTabTitle.simpleProcessManagement',
          to: '/index/newConfig/processConfig',
          id: 'simple_process_management'
        },
        {
          displayName: 'configTabTitle.simpleScheduleManagement',
          to: '/index/newConfig/callScheduleManage',
          id: 'simple_schedule_management'
        },
        {
          displayName: 'configTabTitle.simpleServiceNnumberManagement',
          to: '/index/newConfig/callServiceNo',
          id: 'simple_service_number_management'
        },
        {
          displayName: 'configTabTitle.simpleTelephoneBarStatusSet',
          to: '/index/newConfig/phoneConfig',
          id: 'simple_telephone_bar_status_set'
        },
        {
          displayName: 'configTabTitle.simpleOutgoingCallCircuitCongiguration',
          to: '/index/newConfig/outboundCallLine',
          id: 'simple_outgoing_call_circuit_congiguration'
        },
        {
          displayName: 'configTabTitle.simpleVariableManagement',
          to: '/index/newConfig/variableManage',
          id: 'simple_variable_management'
        },
        {
          displayName: 'configTabTitle.simpleExplicitNumberGroupManagement',
          to: '/index/newConfig/externalNum',
          id: 'simple_explicit_number_group_management'
        },
        {
          displayName: 'configTabTitle.simpleNodeManagement',
          to: '/index/newConfig/nodeManage',
          id: 'simple_node_management'
        },
        {
          displayName: 'configTabTitle.simpleSeatManagement',
          to: '/index/newConfig/agentCallManage',
          id: 'simple_seat_management'
        },
        {
          displayName: 'configTabTitle.simpleVoiceLibraryManagement',
          to: '/index/newConfig/voiceLibraryManage',
          id: 'simple_voice_library_management'
        },
        {
          displayName: 'configTabTitle.simpleBlackRedList',
          to: '/index/newConfig/blackRedList',
          id: 'simple_black_red_list'
        },
        {
          displayName: 'configTabTitle.simpleCallConfigLabel',
          to: '/index/newConfig/labelManage',
          id: 'simple_call_config_label'
        },
        {
          displayName: 'configTabTitle.satisfactionConfig',
          to: '/index/newConfig/satisfactionSurvey',
          id: 'simple_call_satisfaction_config'
        },
        {
          displayName: 'configTabTitle.phoneBook',
          to: '/index/newConfig/phoneBook',
          id: 'simple_call_center'
        },
        {
          displayName: 'configTabTitle.otherConfig',
          to: '/index/newConfig/otherConfig',
          id: 'simple_other_config'
        }
      ]
    }
  },
  activated() {
    console.log('activated')
    console.log(this.$route)
    this.$store.dispatch('getNewFeatures')
  },
  watch: {
    $route(to, from) {
      this.handleZhugeio(to, from)
    }
  },
  methods: {
    backOld() {
      window._hmt && window._hmt.push(['_trackEvent', '其他统计', 'PM-回到旧版设置'])
    },
    isHaveMenu(func) {
      let user = this.$store.state.session.user
      // 只有超级管理员可见得通话配置id
      let AdminShowArr = [
        'simple_pbx_basic_information',
        'simple_sip_management',
        'simple_outgoing_call_circuit_congiguration',
        'simple_variable_management',
        'simple_explicit_number_group_management',
        'simple_seat_management'
      ]
      if (AdminShowArr.includes(func)) {
        return user.type === 'admin' && user.exten === '0000'
      } else {
        return isHasMenu(func, user)
      }
    },
    handleZhugeio(to, from) {
      let fromArr = []
      if (from === 'beforeMount') {
        fromArr = ['', '']
      } else {
        fromArr = from.path.split('/')
      }
      let toArr = to.path.split('/')
      if (toArr[2] == fromArr[2]) {
        if (toArr[3] !== fromArr[3])
          // 说明是跨模块,埋点
          addZhuGeTrack(to.path)
      }
    }
  },
  components: {
    scrollBar
  }
}
</script>
<style lang="stylus">
@import "../../../../assets/common.styl";
  .config-sidebar
    .router-link-active
      li
        color $c-main !important
        background-color #dddee0 !important
</style>
<style lang="stylus">
@import "../../../../assets/common.styl"
.new-config
  .config-sidebar
    text-align left
    position relative
    .side-scroll
      height calc(100vh - 52px)
    .el-menu
      background-color #f0f2f3
    .sidebar__title
      color #a0a9ad
      padding 10px 0
      border-bottom 1px solid #444c4f
    .el-menu__first
      font-weight bold
    .el-submenu
      .el-menu
        .el-menu-item
          padding-left 20px !important
        .el-menu-item:hover,.el-menu-item:focus
          color $c-main
          background-color #dddee0
    .sidebar-menu > .el-menu__first a li
      padding 15px 0px
      color $cf-gray0
    .sidebar-menu > .el-submenu
      color $cf-gray0
    .sidebar-menu .el-submenu li
      font-weight normal
      color #424242
    .sidebar-menu
      padding-top 5px
      margin-bottom 54px
    .el-menu-item
      height 45px
      line-height 14px
      max-width 100%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .el-submenu__title
      height 44px
      line-height 44px
      font-weight bold
      color #000
     .el-submenu__title:hover,.el-submenu__title:focus
       color $c-main
       background-color #dddee0
     .el-submenu .el-menu .el-menu-item
       padding: 8px 0px;
       min-width: 100%;
       height: 30px;
     .config-sidebar__bottom
       position: absolute;
       width: 100%;
       height: 54px;
       bottom: 0px;
       z-index 2;
       background-color: #f5f6f7;
       border-top: 1px solid #e0e0e0;
       box-shadow: 0px -4px 6px -4px rgba(128,128,128,0.2);
       .config-sidebar__bottom-a
         background-color: #459ae9;
         color: #fff;
         border-radius: 4px;
         padding: 3px 7px;
      .el-menu-item:hover, .el-menu-item:focus
        color $c-main !important
        background-color #dddee0
        font-weight bold
</style>
